<template>
  <a-dropdown :trigger="['click']" v-model="show">
    <div slot="overlay" class="dropdown-tabs">
      <a-spin :spinning="loading">
        <a-list class="tab-pane">
          <a-list-item
            style="cursor: pointer"
            v-for="item in notice"
            @click="() => handelClick(item.id, item.model, item.primary_id)"
            :key="item.id"
          >
            <a-list-item-meta
              :title="`${item.notice}`"
              :description="item.created_at"
            >
              <a-avatar
                style="background-color: white"
                slot="avatar"
                src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"
              />
            </a-list-item-meta>
          </a-list-item>
          <!-- <a-list-item>
            <a-list-item-meta
              title="你推荐的 曲妮妮 已通过第三轮面试"
              description="一年前"
            >
              <a-avatar
                style="background-color: white"
                slot="avatar"
                src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"
              />
            </a-list-item-meta>
          </a-list-item>
          <a-list-item>
            <a-list-item-meta
              title="这种模板可以区分多种通知类型"
              description="一年前"
            >
              <a-avatar
                style="background-color: white"
                slot="avatar"
                src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"
              />
            </a-list-item-meta>
          </a-list-item> -->
        </a-list>
      </a-spin>
    </div>
    <span @click="fetchNotice" class="header-notice">
      <a-badge class="notice-badge" v-if='notice' :count="notice.length">
        <a-icon :class="['header-notice-icon']" type="bell" />
      </a-badge>
    </span>
  </a-dropdown>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { notices, notice_click } from "@/services/workPlace";
export default {
  name: "HeaderNotice",
  data() {
    return {
      loading: false,
      show: false,
      notice: []
    };
  },
  watch: {
    // 监听路由的变化 更新提示信息的内容
    $route: {
      handler: function () {
        this.loadNoticeData();
      },
      deep: true
    }
  },
  mounted() {
    this.loadNoticeData();
  },
  computed: {},
  methods: {
    fetchNotice() {
      if (this.loading) {
        this.loading = false;
        return;
      }
      this.loadding = true;
      setTimeout(() => {
        this.loadding = false;
      }, 1000);
    },
    loadNoticeData() {
      notices().then((res) => {
        if (res.data.code === 20000) {
          this.notice = res.data.data && res.data.data.splice(0, 5);
        }
      });
    },
    handelClick(noticeId, model, primary_id) {
      notice_click({ id: noticeId }).then((res) => {
        if (res.data.code === 20000)
          this.$router.push({
            path: `/${model}/detail`,
            query: {
              id: primary_id,
              random: this.random
            }
          });
      });
    }
  }
};
</script>

<style lang="less">
.header-notice {
  display: inline-block;
  transition: all 0.3s;
  span {
    vertical-align: initial;
  }
  .notice-badge {
    color: inherit;
    .header-notice-icon {
      font-size: 16px;
      padding: 4px;
    }
  }
}
.dropdown-tabs {
  background-color: @base-bg-color;
  box-shadow: 0 2px 8px @shadow-color;
  border-radius: 4px;
  min-width: 300px;
  .tab-pane {
    padding: 12px 0;
    min-height: 250px;
  }
  .ant-list-item {
    // padding: 0 30px 0 20px;
    padding-left: 30px;
    padding-right: 20px;
    // background-color: #fff;
    transition: all 0.5s;
  }
  .ant-list-item:hover {
    background: rgba(0, 0, 0, 0.1);
    transition: all 0.5s;
  }
}
</style>
